<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	<title>_WidgetBase on() test</title>

	<script src="boilerplate.js"></script>

	<script>
		require([
			"doh/runner",
			"dojo/_base/declare", "dojo/has", "dojo/_base/lang", "dojo/on", "dojo/parser", "dojo/touch",
			"dijit/registry", "dijit/_WidgetBase", "dojo/domReady!"
		], function(doh, declare, has, lang, on, parser, touch, registry, _WidgetBase){

			var mousedOver, clicked;

			doh.register("on", [
				function setup(){
					declare("MyWidget", _WidgetBase, {
						postCreate: function(){
							on(this.domNode, "click", lang.hitch(this, "onFooBar"));
						},
						onFooBar: function(){
							// This is called whenever the widget is clicked
						},
						foobar: function(){
							// A widget.on("foobar") should go to onFooBar() (above), not here
						}
					});

					parser.parse();
				},

				function connect(){
					// This should work despite the fact that the function onMouseOver has
					// multiple capital letters
					registry.byId("myWidget").on("mouseover", function(){
						mousedOver = true;
						console.log("mouseover event");
					});

					// Likewise, this should work despite the fact that the function onFooBar has
					// multiple capital letters
					registry.byId("myWidget").on("foobar", function(){
						clicked = true;
						console.log("click event");
					});
				},

				function test(){
					var myWidget = registry.byId("myWidget");

					// Test that _WidgetBase.on() catches click event
					doh.f(clicked, "clicked");
					on.emit(myWidget.domNode, "click", {
						bubbles: true,
						cancelable: true,
						which: 1
					});
					doh.t(clicked, "clicked");

					// Test that _WidgetBase.on() catches mouseover event
					doh.f(mousedOver, "mousedOver");
					on.emit(myWidget.domNode, "mouseover", {
						bubbles: true,
						cancelable: true,
						which: 1
					});
					doh.t(mousedOver, "mousedOver");
				},

				function synthetic(){
					// Test that on() works for synthetic events

					var myWidget = registry.byId("myWidget"),
						touched;

					myWidget.on(dojo.touch.press, function(){
						touched = true;
					});

					var eventType = has("pointer-events") ? "pointerdown" : has("MSPointer") ?
									"MSPointerDown" : has("touch-events") ? "touchstart" : "mousedown",
						target = myWidget.domNode;

					if(document.createEvent && target.dispatchEvent){
						// This branch needed or the test fails on iOS in dojo/on,
						// because changedTouches[0] isn't defined.

						var touch = {
							identifier: (new Date()).getTime(),
							target: target,
							screenX: 0,
							screenY: 0,
							clientX: 0,
							clientY: 0,
							pageX: 0,
							pageY: 0
						};

						var mouseEvent = document.createEvent("MouseEvent");
						mouseEvent.initMouseEvent(
							eventType,
							true,
							true,
							target.ownerDocument.defaultView,
							0,
							0,
							0,
							0,
							0,
							false,
							false,
							false,
							false,
							0,
							document.body	// relatedTarget, for mouseout events
						);

						if(/touch/.test(eventType)){
							mouseEvent['touches'] = [touch];
							mouseEvent['targetTouches'] = [touch];
							mouseEvent['changedTouches'] = [touch];
						}

						target.dispatchEvent(mouseEvent);
					}else{
						on.emit(myWidget.domNode, eventType, {
							bubbles: true,
							cancelable: true,
							which: 1
						});
					}

					doh.t(touched, "touched");
				},

				function syntheticNoCallbackArgs(){
					var evt = null;
					var MyWidget = declare(_WidgetBase, {
						show: function(){
							return this.emit('show');
						},
						onshow: function(e){
							evt = e;
						}
					});
					new MyWidget({}).show();
					doh.isNot(null, evt, "onshow was called with event object");
				}
			]);

			doh.run();
		});

	</script>
</head>
<body>
	<div id="myWidget" data-dojo-type="MyWidget">
		mouseover and click events to console
	</div>
</body>
</html>
